<template>
  <div>
    <div class="top">
      <div class="header">
        <div class="btns">
          <button class="btn btn-bg1 export">导出</button>
        </div>
        <div class="search">
          <el-select v-model="value1" class="mr10" placeholder="请选择" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value" />
          </el-select>
          <el-select v-model="value2" class="mr10" placeholder="请选择" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value" />
          </el-select>
          <el-select v-model="value3" class="mr10" placeholder="请选择" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value" />
          </el-select>
          <el-select v-model="value4" class="mr10" placeholder="请选择" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value" />
          </el-select>
          <el-select v-model="value5" class="mr10" placeholder="请选择" filterable clearable>
            <el-option v-for="item in options" :key="item.value" :value="item.value" />
          </el-select>
          <!-- 日期范围 -->
          <div class="date-range">
            <!-- 开始日期 -->
            <el-date-picker
              v-model="startDate"
              type="date"
              placeholder="开始日期"
              value-format="YYYY-MM-DD"
              id="start-date"
              @change="onDatePicketChange"
            />
            <span style="line-height: 28px">~</span>
            <!-- 结束日期 -->
            <el-date-picker
              v-model="endDate"
              type="date"
              placeholder="结束日期"
              value-format="YYYY-MM-DD"
              @change="onDatePicketChange"
            />
          </div>
          <el-input v-model="input" placeholder="检索" class="input-with-select">
            <template #prepend>
              <el-select class="w100" v-model="select" placeholder="选择">
                <el-option label="工单编号" value="1" />
                <el-option label="工单编号" value="2" />
                <el-option label="工单编号" value="3" />
              </el-select>
            </template>
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>
      </div>
    </div>
    <div class="app-container">
      <div class="app-container-inner">
        <div class="main">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <el-tab-pane label="监控中" name="first">
              <div class="table">
                <el-table border stripe resizable :data="tableData">
                  <el-table-column
                    show-overflow-tooltip
                    type="index"
                    :index="indexMethod"
                    label="序号"
                    width="50"
                  />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="监控产品编码"
                    width="250"
                  />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="监控维保事件"
                    min-width="200"
                  />
                  <el-table-column show-overflow-tooltip prop="date" label="触发日期" width="200" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="监控维保客户"
                    width="200"
                  />
                  <el-table-column show-overflow-tooltip prop="date" label="监控周期" width="120" />
                  <el-table-column show-overflow-tooltip prop="date" label="触发次数" width="120" />
                  <el-table-column show-overflow-tooltip prop="date" label="触发周期" width="120" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="事件创建日期"
                    width="200"
                  />
                </el-table>
              </div>
              <div class="footer">
                <div class="pagina"> <Pagination /></div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="已禁用" name="second">
              <div class="table">
                <el-table border stripe resizable :data="tableData">
                  <el-table-column
                    show-overflow-tooltip
                    type="index"
                    :index="indexMethod"
                    label="序号"
                    width="50"
                  />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="监控产品编码"
                    width="250"
                  />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="监控维保事件"
                    min-width="200"
                  />
                  <el-table-column show-overflow-tooltip prop="date" label="触发日期" width="200" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="监控维保客户"
                    width="200"
                  />
                  <el-table-column show-overflow-tooltip prop="date" label="监控周期" width="120" />
                  <el-table-column show-overflow-tooltip prop="date" label="触发次数" width="120" />
                  <el-table-column show-overflow-tooltip prop="date" label="触发周期" width="120" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="事件创建日期"
                    width="200"
                  />
                </el-table>
              </div>
              <div class="footer">
                <div class="pagina"> <Pagination /></div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="已完成" name="third">
              <div class="table">
                <el-table border stripe resizable :data="tableData">
                  <el-table-column
                    show-overflow-tooltip
                    type="index"
                    :index="indexMethod"
                    label="序号"
                    width="50"
                  />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="监控产品编码"
                    width="250"
                  />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="监控维保事件"
                    min-width="200"
                  />
                  <el-table-column show-overflow-tooltip prop="date" label="触发日期" width="200" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="监控维保客户"
                    width="200"
                  />
                  <el-table-column show-overflow-tooltip prop="date" label="监控周期" width="120" />
                  <el-table-column show-overflow-tooltip prop="date" label="触发次数" width="120" />
                  <el-table-column show-overflow-tooltip prop="date" label="触发周期" width="120" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="事件创建日期"
                    width="200"
                  />
                </el-table>
              </div>
              <div class="footer">
                <div class="pagina"> <Pagination /></div>
              </div>
            </el-tab-pane>
            <el-tab-pane label="全部" name="fifth">
              <div class="table">
                <el-table border stripe resizable :data="tableData">
                  <el-table-column
                    show-overflow-tooltip
                    type="index"
                    :index="indexMethod"
                    label="序号"
                    width="50"
                  />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="监控产品编码"
                    width="250"
                  />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="监控维保事件"
                    min-width="200"
                  />
                  <el-table-column show-overflow-tooltip prop="date" label="触发日期" width="200" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="监控维保客户"
                    width="200"
                  />
                  <el-table-column show-overflow-tooltip prop="date" label="监控周期" width="120" />
                  <el-table-column show-overflow-tooltip prop="date" label="触发次数" width="120" />
                  <el-table-column show-overflow-tooltip prop="date" label="触发周期" width="120" />
                  <el-table-column
                    show-overflow-tooltip
                    prop="date"
                    label="事件创建日期"
                    width="200"
                  />
                </el-table>
              </div>
              <div class="footer">
                <div class="pagina"> <Pagination /></div>
              </div>
            </el-tab-pane>
          </el-tabs>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
  import Pagination from '@/components/Pagination/index.vue'
  import pageComponentName from '@/config/page-component-name'
  import { Search } from '@element-plus/icons-vue'
  import { ElMessage, TabsPaneContext } from 'element-plus'
  import { ref } from 'vue'

  defineOptions({
    name: pageComponentName.regularInspection.maintenanceMonitor,
  })

  //列表序号
  const indexMethod = (index: number) => {
    return (index + 1) * 1
  }
  const input = ref('')
  const activeName = ref('first')
  const value1 = ref('')
  const value2 = ref('')
  const value3 = ref('')
  const value4 = ref('')
  const value5 = ref('')
  const value6 = ref('')
  const select = ref('')
  const size = ref<'default' | 'large' | 'small'>('large')
  const options = [
    {
      value: '全部类型',
    },
    {
      value: '全部品牌',
    },
    {
      value: '全部分类',
    },
  ]
  const shortcuts = [
    {
      text: '上周',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
        return [start, end]
      },
    },
    {
      text: '上个月',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
        return [start, end]
      },
    },
    {
      text: '上 3 个月',
      value: () => {
        const end = new Date()
        const start = new Date()
        start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
        return [start, end]
      },
    },
  ]
  const handleClick = (tab: TabsPaneContext, event: Event) => {}
  const tableData = [
    {
      date: '20230602590500824',
      name: '2016-05-02',
      state: 'California',
      city: '自动派单测试',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-03',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-02',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
    {
      date: '2016-05-04',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Home',
    },
    {
      date: '2016-05-01',
      name: 'Tom',
      state: 'California',
      city: 'Los Angeles',
      address: 'No. 189, Grove St, Los Angeles',
      zip: 'CA 90036',
      tag: 'Office',
    },
  ]

  // 开始日期
  const startDate = ref('')

  // 结束日期
  const endDate = ref('')

  // 日期选择事件
  const onDatePicketChange = () => {
    const endTimeStamp = new Date(endDate.value).getTime()
    const startTimeStamp = new Date(startDate.value).getTime()
    if (startTimeStamp > endTimeStamp) {
      ElMessage({
        type: 'error',
        message: '结束日期不能小于开始日期',
      })
    }
  }
</script>

<style scoped lang="scss">
  @import './index';
</style>
